<template>
	<view>
		<list-item class="list-item">
			<view>
				<image class="icon" src="../../static/image/92.png">{{cookData.date}}</image>
			</view>
			<view>
				<image class="icon" src="../../static/image/91.png">{{cookData.address}}</image>
			</view>
			<image class="img" :src="cookData.imgUrl"></image>
			<view class="content">
				<view class="content-left">
					<view class="text">{{cookData.title}}</view>
					<view class="redText">￥{{cookData.price}}/桌</view>
				</view>
				<view class="content-right" @click="callCook(cookData.name,cookData.tel)">
					<image class="icon" src="../../static/image/93.png"></image>
					<view class="text">电话</view>
				</view>
			</view>
			<button type="warn" disabled="false">我的账单</button>
		</list-item>
	</view>
</template>

<script>
	export default {
		props: {
			cookData:{
				type:Object,
				default: () => ([])
			}
		},
		data() {
			return {
				cookData: {}
			}
		},
		methods:{
			callCook(name,tel){
				uni.showModal({
					title: name,
					content: tel,
					confirmText:"拨打电话",
					confirmColor: "#ff6700",
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定,调用拨打电话功能');
							uni.makePhoneCall({
								phoneNumber: tel //仅为示例
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
				
				
			}
		}
	}
</script>

<style lang="less">
	.list-item {
		.img {
			width: 100%;
			height: 375rpx;
			border-radius: 20rpx;
		}

		.content {
			display: flex;
			justify-content: space-between;

			.content-left {
				.redText {
					color: red;
				}
			}

			.content-right {
				.icon {
					width: 30rpx;
					height: 30rpx;
					margin: 0rpx;
				}

				.text {
					font-size: 30rpx;
					margin: 3rpx;
					color: #EDB65F;
				}
			}

		}
	}
</style>
